<template>
	<view class="valid-time">
		<u-popup :show="show" mode="bottom" @close="close" @open="open" @touchmove.stop.prevent="moveHandle">
			<view class="title">
				距离该团失效时间
			</view>
			<view class="valid-type">
				<u-radio-group
				    v-model="radioValue"
				    placement="column"
					borderBottom="true"
					iconPlacement="right"
				  >
				    <u-radio
				      :customStyle="{padding: '30rpx 25rpx'}"
				      v-for="(item, index) in radioList"
				      :key="index"
				      :label="item.name"
				      :name="item.id"
				      @change="radioChange"
					  iconSize="16"
				    >
				    </u-radio>
				  </u-radio-group>
			</view>

			<u-datetime-picker
				ref="endDatetimePicker"
				mode="datetime"
				:show="endDatetimeShow"
				:minDate="endMinDate"
				v-model="endDatetimeValue"
				@confirm="endDatetimeConfirm($event)"
				@cancel="endDatetimeCancel()"
			></u-datetime-picker>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"valid-time",
		props:{
			show: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			show(){
				if (this.radioValue == 4){
					setTimeout(() => {
						this.endDatetimeShow = true;
					}, 1800)
				}
			}
		},
		data() {
			return {
				// 基本案列数据
				radioList: [
					{name: '一天后失效', id: 0},
					{name: '两天后失效', id: 1},
					{name: '三天后失效', id: 2},
					{name: '五天后失效', id: 3},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radioValue: null,

				endDatetimeShow: false,
				endMinDate: Number(new Date()),
				endDatetimeValue: Number(new Date()),

			};
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.endDatetimePicker.setFormatter(this.formatter)
		},
		methods: {
			open(){
				this.show = true;
			},
			close(){
				this.$emit('close');
			},
			radioChange(n) {
				for (let i = 0; i < this.radioList.length; i++) {
					if (this.radioList[i].id == n){
						if (this.radioList[i].id != 4){
							this.$emit('outCheckedRadioValue', this.radioList[i]);
							this.close();
						} else {
							this.endDatetimeShow = true;
						}
						break;
					}
				}
			},

			// 防止遮罩层滚动穿透
			moveHandle(){},

			//时间控件确认
			endDatetimeConfirm(e) {
				let dateStr = uni.$u.date(e.value, 'yyyy-mm-dd hh:MM');

				this.endDatetimeShow = false;
				console.log('活动结束时间:', dateStr);
				this.$emit('outCheckedRadioValue', {name: dateStr + ':59', id: 4});
				setTimeout(() => {
					this.close();
				}, 500)
			},
			//时间控件取消
			endDatetimeCancel(){
				this.endDatetimeShow = false;
			},

			//时间控件格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.valid-time{
		.title{
			padding: 30rpx 0;
			text-align: center;
			background-color: #FBFBFB;
		}
		.custom{
			padding: 30rpx 25rpx;
			color: #606266;
		    font-size: 30rpx;
		    line-height: 30rpx;
		}
	}

</style>
